<template>
	<div class="container">
		<div class="query-form">
			<el-form ref="form" :inline="true" :model="form" label-width="120px">
				<el-form-item label="知识关键字">
					<el-input v-model="form.name" placeholder="请输入知识关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button type="success" @click="onAdd">添加</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="table-data">
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column align="center" prop="id" label="id"/>
				<el-table-column align="center" prop="name" label="知识名称"/>
				<el-table-column align="center" prop="title" label="知识标题"/>
				<el-table-column align="center" prop="type" label="知识类型"/>
				<el-table-column align="center" prop="img" label="知识图片">
					<template slot-scope="scope">
						<img :src="scope.row.img" width="80"/>
					</template>
				</el-table-column>
				<!-- <el-table-column align="center" prop="createUser" label="创建人"/> -->
				<el-table-column align="center" prop="createTime" label="创建时间"/>
				<el-table-column
				      fixed="right"
				      label="操作"
					  align="center"
				      width="200">
				      <template slot-scope="scope">
						  <el-button
						    @click.native.prevent="editRow(scope.row)"
						    type="text"
						    size="small">
						    编辑
						  </el-button>
				        <el-button
				          @click.native.prevent="deleteRow(scope.row)"
				          type="text"
				          size="small">
				          删除
				        </el-button>
				      </template>
				    </el-table-column>
			</el-table>
			
			<div class="bottom-page">
				<el-pagination
				  background
				  layout="prev, pager, next"
				  :page-size="form.size"
				  @current-change="currentChange"
				  @size-change="sizeChange"
				  :total="totalCnt">
				</el-pagination>
			</div>
		</div>
		<form-page ref="page" @close="getData"></form-page>
	</div>
</template>

<script>
	import { get,del } from "@/api/knowledge.js";//引入
	import formPage from './form.vue';
	export default {
		components:{
			formPage
		},
		data() {
			return {
				form: {
					name: "",
					page: 1,
					size: 10,
				},
				tableData: [],
				totalCnt: 0,
				type: 'add',
			}
		},
		created() {
			this.getData()
		},
		methods: {
			onAdd(){
				this.type = 'add'
				this.$refs["page"].open({}, 'add')
			},
			editRow(row){
				this.type = 'edit'
				console.log('edit', this.type);
				row.password = ""
				this.$refs["page"].open(row, 'edit')
			},
			deleteRow(row){
				this.$confirm('确定删除当前用户吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					del({id: row.id}).then(res => {
						if(res.code == 200){
							this.$message.success(res.message)
							this.getData()
						}else {
							his.$message.error(res.message)
						}
					})
				})
			},
			onSubmit() {
				this.getData()
			},
			getData(){
				get(this.form).then(res => {
					this.tableData = res.data
					this.totalCnt = res.total
				})
			},
			currentChange(e){
				console.log(e, 'currentChange');
				this.form.page = e
				this.getData()
			},
			sizeChange(e){
				console.log(e, 'sizeChange');
				this.form.size = e
				this.getData()
			}
		}
	}
</script>

<style>
</style>